/**
 * 弹窗通用
 * @author Hezq
 * @description 使用时先引用jQuery
 * @demo
 * DOM
 * <div class="pop-wrap pop-name" style="display: none;">
 *  <div class="pop-box">
 *    <a href="javascript: hideDialog();" class="btn-close"></a>
 *  </div>
 * </div>
 * 
 * Style
 * .pop-wrap {display: block; width: 100%; height: 100%; background-color: rgb(0, 0, 0, .7); position: absolute; z-index: 999; top: 0; left: 0;}
 * .pop-wrap .pop-box {position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: 
 * translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); overflow: hidden; position: relative; pointer-events: all;
 * -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
 * .pop-wrap .pop-cont {text-align: center;  overflow: hidden;}
 * .pop-wrap .btn-close {position: absolute; width: 100px; height: 80px; top: 15px; right: 20px;}
 */

(function () {
  var dialogName = null;

  $('.pop-wrap').hide(); // 初始化隐藏全部弹窗
  $('.pop-wrap').click(function () { hideDialog(); }) // 点击蒙层关闭弹窗
  $('.pop-box').click(function (e) { e.stopPropagation(); }) // 点击窗体阻止事件传递

  // 显示弹窗
  function showDialog(id) {
    if (dialogName) {
      hideDialog(function () {
        $('.' + id).fadeIn(200);
        dialogName = id;
        // console.log('open', dialogName);
      })
      return;
    }
    $('.' + id).fadeIn(200);
    dialogName = id;
    // console.log('open', dialogName);
  }

  // 隐藏弹窗
  function hideDialog(cb) {
    $('.' + dialogName).fadeOut(200, function () {
      // console.log('hide', dialogName);
      dialogName = null;
      if (typeof cb === 'function') cb();
    });
  }

  // loading
  function showLoading() {
    let html = `<div class="loading"><span class="half-circle1"><em></em></span><span class="half-circle2"><em></em></span></div>`
    $('body').append(html);
    let loading = {
      'display': 'none',
      'position': 'absolute',
      'width': '32px',
      'height': '32px',
      'top': '50%',
      'left': '50%',
      'transform': 'translate(-50%, -50%)',
      'z-index': '999'
    }
    let halfCircle1 = {
      'display': 'block',
      'width': '16px',
      'height': '32px',
      'overflow': 'hidden',
      'transform': 'rotate(180deg)',
      'transform-origin': 'center right'
    }
    let halfCircle2 = {
      'display': 'block',
      'width': '16px',
      'height': '32px',
      'overflow': 'hidden',
      'transform': 'rotate(270deg)',
      'transform-origin': 'center right'
    }
    let circle = {
      'display': 'block',
      'width': '28px',
      'height': '28px',
      'border': '2px solid rgba(255, 255, 255, .8)',
      'border-radius': '50%'
    }
    $('.loading').css(loading).fadeIn(300);
    $('.loading .half-circle1').css(halfCircle1);
    $('.loading .half-circle2').css(halfCircle2);
    $('.loading .half-circle1 em').css(circle);
    $('.loading .half-circle2 em').css(circle);
  }

  function hideLoading() {
    $('.loading').remove();
  }

  // 提示浮窗
  function showToast(content, time) {
    let html = `<p class="toast">${content}</p>`
    $('body').append(html);
    let style = {
      'display': 'none',
      'position': 'absolute',
      'min-width': '100px',
      'max-width': '250px',
      'height': 'auto',
      'border-radius': '5px',
      'top': '40%',
      'left': '50%',
      'transform': 'translate(-50%, -50%)',
      'z-index': '999',
      'padding': '5px 30px',
      'background-color': 'rgba(0, 0, 0, .6)',
      'font-size': '18px',
      'color': '#fff',
      'text-align': 'center',
      'line-height': '30px',
    }
    $('.toast').css(style).fadeIn(500);
    setTimeout(function () {
      let toast = $('.toast');
      toast.fadeOut(500, function () {
        toast.remove();
      })
    }, time || 1000)
  }

  window.showDialog = showDialog;
  window.hideDialog = hideDialog;
  window.showLoading = showLoading;
  window.showToast = showToast;
})()